<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*菜单栏*/
        .one {
            width: 694px;
            height: 50px;
            margin: 50px auto 0;
            font-size: 0;
        }

        .one a {
            display: inline-block;
            width: 98px;
            height: 48px;
            border: 1px solid gold;
            font: 16px/48px '微软雅黑';
            color: pink;
            margin-left: -1px;
            text-decoration: none;
            text-align: center;
            background-color: #fff;
        }

        .one a:hover {
            background-color: gold;
            color: #fff;
        }

        /*新闻列表*/
        .news_title {
            width: 400px;
            height: 40px;
            border-bottom: 1px solid #ff8200;
            margin: 50px auto 0;
        }

        .news_title h3 {
            float: left;
            width: 80px;
            height: 40px;
            background-color: #ff8200;
            color: #fff;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            margin: 0;
        }

        .news_title a {
            float: right;
            text-decoration: none;
            font-size: 14px;
            color: #666;
            margin-top: 6px;
        }

        .news_title a:hover {
            color: #fff;
            background-color: #ff8200;
        }

        /*图形*/
        .container {
            width: 400px;
            height: 80px;
            border: 1px solid #ff8200;
            margin: 50px auto 0;
        }

        .container .item1,
        .container .item2 {
            width: 60px;
            height: 60px;
            margin: 10px;
        }

        .container .item1 {
            float: left;
            background-color: #90ee90;
        }

        .container .item2 {
            float: right;
            background-color: pink;
        }

        /*菜单栏*/
        .menu {
            list-style: none;
            width: 694px;
            height: 50px;
            margin: 50px auto 0;
        }

        .menu li {
            float: left;
            width: 98px;
            height: 48px;
            border: 1px solid gold;
            margin-left: -1px;
            background-color: #fff;
        }

        .menu li a {
            display: block;
            height: 48px;
            text-decoration: none;
            text-align: center;
            line-height: 48px;
            font: 16px/48px '微软雅黑';
            color: pink;
        }

        .menu li a:hover {
            background-color: gold;
            color: white;
        }

        /*文字绕图*/
        .box {
            width: 450px;
            height: 210px;
            border: 1px solid black;
            margin: 50px auto 0;
        }

        .box img {
            float: left;
            margin: 10px 10px 0 10px;
        }

        .box div {
            margin: 10px;
            line-height: 22px;
        }

        /*盒子*/
        .demo {
            width: 210px;
            border: 1px solid black;
            margin: 50px auto 0;
        }

        .demo div {
            width: 50px;
            height: 50px;
            background-color: gold;
            margin: 10px;
            float: left;
        }

        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }
    </style>
</head>

<body>
    <!--菜单栏-->
    <div class="one">
        <a href="#">首页</a>
        <a href="#">公司简介</a>
        <a href="#">解决方案</a>
        <a href="#">公司新闻</a>
        <a href="#">行业动态</a>
        <a href="#">招贤纳才</a>
        <a href="#">联系我们</a>
    </div>
    <!--新闻列表-->
    <div class="news_title">
        <h3>新闻列表</h3>
        <a href="#">更多&gt;</a>
    </div>
    <!--图形-->
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
    <!--菜单栏-->
    <ul class="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">解决方案</a></li>
        <li><a href="#">公司新闻</a></li>
        <li><a href="#">行业动态</a></li>
        <li><a href="#">招贤纳才</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
    <!--文字绕图-->
    <div class="box">
        <img src="img/bg.jpg">
        <div>
            1. 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
            2. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
            3. 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
            4. 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
            5. 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
        </div>
    </div>
    <!--盒子-->
    <div class="demo clearfix">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>